import { FC } from "react";

interface IconProps {
  title:
    | "like"
    | "basket"
    | "star"
    | "language"
    | "vk"
    | "telegram"
    | "whatsapp"
    | "deleteCard"
    | "minus"
    | "plus"
    | "close"
    | "zoom";
}

export const Icon: FC<IconProps> = ({ title }) => {
  return (
    <>
      {title === "like" && (
        <svg
          width="23"
          height="20"
          viewBox="0 0 23 20"
          fill="none"
          xmlns="http://www.w3.org/2000/svg">
          <path
            d="M11.4867 1.65429C14.0706 -0.627558 18.0635 -0.551821 20.5528 1.90098C23.0409 4.35486 23.1267 8.2629 20.8124 10.812L11.4845 20L2.15892 10.812C-0.155442 8.2629 -0.0685429 4.34837 2.41851 1.90098C4.90996 -0.548575 8.89519 -0.630804 11.4867 1.65429ZM18.9952 3.42979C17.3452 1.80469 14.6833 1.73869 12.9563 3.26425L11.4878 4.56044L10.0183 3.26533C8.2858 1.73761 5.62935 1.80469 3.97498 3.43195C2.33601 5.04407 2.25351 7.62455 3.76379 9.32971L11.4856 16.937L19.2075 9.3308C20.7189 7.62455 20.6364 5.04732 18.9952 3.42979Z"
            fill="#838383"
          />
        </svg>
      )}
      {title === "basket" && (
        <svg
          width="24"
          height="25"
          viewBox="0 0 24 25"
          fill="none"
          xmlns="http://www.w3.org/2000/svg">
          <path
            d="M4.08589 6.04602L0.48584 2.50535L2.05663 0.959991L5.65556 4.50175H22.5757C22.7487 4.50174 22.9193 4.54152 23.074 4.61792C23.2286 4.69431 23.3629 4.80521 23.4662 4.94176C23.5695 5.07831 23.639 5.23673 23.669 5.40438C23.699 5.57202 23.6888 5.74425 23.6391 5.90732L20.9749 14.6443C20.9064 14.8694 20.7659 15.0667 20.5743 15.207C20.3827 15.3473 20.1503 15.423 19.9114 15.423H6.30608V17.6072H18.5172V19.7915H5.19598C4.90157 19.7915 4.61921 19.6764 4.41103 19.4716C4.20284 19.2668 4.08589 18.989 4.08589 18.6994V6.04602ZM6.30608 6.686V13.2387H19.0855L21.0837 6.686H6.30608ZM5.75103 24.16C5.30941 24.16 4.88587 23.9874 4.5736 23.6802C4.26132 23.373 4.08589 22.9563 4.08589 22.5218C4.08589 22.0873 4.26132 21.6707 4.5736 21.3634C4.88587 21.0562 5.30941 20.8836 5.75103 20.8836C6.19266 20.8836 6.61619 21.0562 6.92847 21.3634C7.24074 21.6707 7.41618 22.0873 7.41618 22.5218C7.41618 22.9563 7.24074 23.373 6.92847 23.6802C6.61619 23.9874 6.19266 24.16 5.75103 24.16ZM19.0722 24.16C18.6306 24.16 18.207 23.9874 17.8948 23.6802C17.5825 23.373 17.4071 22.9563 17.4071 22.5218C17.4071 22.0873 17.5825 21.6707 17.8948 21.3634C18.207 21.0562 18.6306 20.8836 19.0722 20.8836C19.5138 20.8836 19.9374 21.0562 20.2496 21.3634C20.5619 21.6707 20.7373 22.0873 20.7373 22.5218C20.7373 22.9563 20.5619 23.373 20.2496 23.6802C19.9374 23.9874 19.5138 24.16 19.0722 24.16Z"
            fill="#838383"
          />
        </svg>
      )}
      {title === "star" && (
        <svg
          width="25"
          height="23"
          viewBox="0 0 25 23"
          fill="none"
          xmlns="http://www.w3.org/2000/svg">
          <path
            d="M12.6268 17.6614L5.41618 22.0127L7.37647 13.892L0.960754 8.462L9.38215 7.79538L12.6268 0.0867615L15.8715 7.79538L24.2941 8.462L17.8771 13.892L19.8374 22.0127L12.6268 17.6614Z"
            fill="#FFCE7F"
          />
        </svg>
      )}
      {title === "language" && (
        <svg
          width="20"
          height="20"
          viewBox="0 0 20 20"
          fill="none"
          xmlns="http://www.w3.org/2000/svg">
          <g clipPath="url(#clip0_2_187)">
            <path
              d="M1.66666 9.99996C1.66666 14.6025 5.3975 18.3333 10 18.3333C14.6025 18.3333 18.3333 14.6025 18.3333 9.99996C18.3333 5.39746 14.6025 1.66663 10 1.66663C5.3975 1.66663 1.66666 5.39746 1.66666 9.99996Z"
              stroke="#838383"
              strokeWidth="1.5"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
            <path
              d="M10.8333 1.70825C10.8333 1.70825 13.3333 4.99992 13.3333 9.99992C13.3333 14.9999 10.8333 18.2916 10.8333 18.2916"
              stroke="#838383"
              strokeWidth="1.5"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
            <path
              d="M9.16666 18.2916C9.16666 18.2916 6.66666 14.9999 6.66666 9.99992C6.66666 4.99992 9.16666 1.70825 9.16666 1.70825"
              stroke="#838383"
              strokeWidth="1.5"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
            <path
              d="M2.19167 12.9166H17.8083"
              stroke="#838383"
              strokeWidth="1.5"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
            <path
              d="M2.19167 7.08325H17.8083"
              stroke="#838383"
              strokeWidth="1.5"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
          </g>
          <defs>
            <clipPath id="clip0_2_187">
              <rect width="20" height="20" fill="white" />
            </clipPath>
          </defs>
        </svg>
      )}
      {title === "vk" && (
        <svg
          width="31"
          height="21"
          viewBox="0 0 31 21"
          fill="none"
          xmlns="http://www.w3.org/2000/svg">
          <path
            d="M0 2.99944C0 1.96133 0.575033 1.40157 1.7251 1.32015L6.15682 1.35068C6.45425 1.35068 6.65254 1.50334 6.75168 1.80867C7.20774 3.3353 7.71833 4.65328 8.28345 5.76263C8.84857 6.87198 9.58719 8.14926 10.4993 9.59447C10.5786 9.77766 10.7075 9.86926 10.886 9.86926C11.0248 9.86926 11.1338 9.79802 11.2131 9.65553L11.3024 9.31967L11.3321 4.03754C11.3321 3.67115 11.2478 3.42689 11.0793 3.30476C10.9108 3.18263 10.5985 3.09104 10.1424 3.02997C9.78547 2.96891 9.60702 2.745 9.60702 2.35826C9.60702 2.27683 9.61693 2.21577 9.63676 2.17506C10.0532 0.851983 11.2429 0.190445 13.2059 0.190445L14.8715 0.159912C15.625 0.159912 16.2496 0.353285 16.7454 0.74003C17.2411 1.12678 17.4889 1.73743 17.4889 2.57198V9.50287C17.6277 9.60465 17.7566 9.65553 17.8756 9.65553C18.173 9.65553 18.4308 9.47234 18.6489 9.10595C20.8301 5.97127 22.0099 3.8747 22.1883 2.81624C22.1883 2.79589 22.2082 2.745 22.2478 2.66358C22.3866 2.35826 22.6147 2.09364 22.9319 1.86973C23.2492 1.64583 23.5268 1.49317 23.7647 1.41175C23.844 1.37104 23.9333 1.35068 24.0324 1.35068H28.6426L28.94 1.38121C29.3366 1.38121 29.6439 1.57459 29.8621 1.96133C29.9414 2.08346 29.9959 2.21577 30.0256 2.35826C30.0554 2.50074 30.0752 2.64323 30.0851 2.78571C30.095 2.9282 30.1 3.00962 30.1 3.02997V3.2437C29.9612 4.07826 29.6092 4.96879 29.0441 5.9153C28.479 6.86181 27.7602 7.88465 26.8877 8.98382C26.0153 10.083 25.47 10.8056 25.2519 11.1516C25.0734 11.3959 24.9842 11.6198 24.9842 11.8233C24.9842 11.9862 25.0635 12.1694 25.2221 12.3729L29.5646 17.9909C29.8026 18.3166 29.9215 18.6728 29.9215 19.0596C29.9215 19.5277 29.7431 19.9145 29.3862 20.2198C29.0292 20.5251 28.6029 20.6981 28.1072 20.7388L27.6016 20.7694H23.0806C23.0608 20.7694 23.0211 20.7745 22.9617 20.7846C22.9022 20.7948 22.8625 20.7999 22.8427 20.7999C22.4065 20.7999 22 20.6065 21.6232 20.2198C21.4844 20.057 20.5525 18.856 18.8274 16.617C18.7282 16.4745 18.5894 16.3422 18.411 16.22C18.3317 16.5457 18.2276 17.0139 18.0987 17.6245C17.9698 18.2352 17.8756 18.6728 17.8161 18.9374L17.7269 19.4565C17.5286 20.1689 17.1122 20.5964 16.4777 20.7388L16.0613 20.7694H13.1464C11.5007 20.7694 9.85983 19.9959 8.22396 18.4489C6.58809 16.9019 5.11581 14.902 3.80711 12.4493C2.49842 9.99648 1.27895 7.14169 0.148715 3.88488C0.0495718 3.62027 0 3.32512 0 2.99944ZM17.8756 10.9074C17.4592 10.9074 17.0824 10.7903 16.7454 10.5562C16.4083 10.3222 16.2397 10.0016 16.2397 9.59447V2.57198C16.2397 2.16488 16.1406 1.87482 15.9423 1.70181C15.744 1.52879 15.397 1.44228 14.9013 1.44228L13.2059 1.50334C12.3533 1.50334 11.7089 1.65601 11.2726 1.96133C12.1451 2.38879 12.5813 3.08086 12.5813 4.03754V9.41127C12.5417 9.92015 12.3434 10.3425 11.9865 10.6784C11.6295 11.0142 11.233 11.1822 10.7967 11.1822C10.2019 11.1822 9.74582 10.887 9.42856 10.2967C7.88192 7.89482 6.73185 5.61506 5.97836 3.45743L5.71067 2.66358L1.75484 2.63305C1.49707 2.63305 1.35331 2.64831 1.32357 2.67885C1.29382 2.70938 1.27895 2.79589 1.27895 2.93837C1.27895 3.12157 1.29878 3.31494 1.33844 3.51849L1.96304 5.22831C3.62866 9.64536 5.43803 13.1261 7.39116 15.6704C9.34429 18.2148 11.2627 19.487 13.1464 19.487H16.1208C16.2397 19.487 16.329 19.4514 16.3884 19.3801C16.4479 19.3089 16.4975 19.1715 16.5372 18.968L16.5966 18.6626L17.1618 15.9758C17.3204 15.6094 17.4592 15.3651 17.5782 15.243C17.7963 15.0191 18.0541 14.9071 18.3515 14.9071C18.8274 14.9071 19.3132 15.2023 19.8089 15.7926L22.3371 19.0901C22.4957 19.3547 22.6642 19.487 22.8427 19.487H27.7503C28.3452 19.487 28.6426 19.3343 28.6426 19.029C28.6426 18.9272 28.6128 18.8255 28.5534 18.7237L24.2406 13.1973C23.9035 12.7699 23.735 12.3119 23.735 11.8233C23.735 11.3348 23.8936 10.8667 24.2109 10.4188C24.4686 10.0117 24.9693 9.33494 25.7129 8.38843C26.4565 7.44192 27.1059 6.55648 27.6611 5.7321C28.2163 4.90772 28.5831 4.15968 28.7616 3.48796L28.8508 3.09104C28.831 3.05033 28.821 2.98417 28.821 2.89257C28.821 2.80098 28.8111 2.72465 28.7913 2.66358H24.1216C23.8242 2.78571 23.5863 2.96891 23.4078 3.21317L23.2293 3.79328C22.7336 5.19778 21.4348 7.36559 19.333 10.2967C18.9166 10.7038 18.4308 10.9074 17.8756 10.9074Z"
            fill="#101010"
          />
        </svg>
      )}
      {title === "telegram" && (
        <svg
          width="31"
          height="31"
          viewBox="0 0 31 31"
          fill="none"
          xmlns="http://www.w3.org/2000/svg">
          <path
            d="M15.05 27.09C18.2432 27.09 21.3056 25.8215 23.5636 23.5636C25.8215 21.3056 27.09 18.2432 27.09 15.05C27.09 11.8568 25.8215 8.79437 23.5636 6.53643C21.3056 4.2785 18.2432 3.01 15.05 3.01C11.8568 3.01 8.79437 4.2785 6.53643 6.53643C4.2785 8.79437 3.01 11.8568 3.01 15.05C3.01 18.2432 4.2785 21.3056 6.53643 23.5636C8.79437 25.8215 11.8568 27.09 15.05 27.09ZM15.05 30.1C6.73789 30.1 0 23.3621 0 15.05C0 6.73789 6.73789 0 15.05 0C23.3621 0 30.1 6.73789 30.1 15.05C30.1 23.3621 23.3621 30.1 15.05 30.1ZM10.3695 16.8109L6.60996 15.6385C5.79726 15.3901 5.79275 14.8303 6.79207 14.4284L21.4402 8.76964C22.2906 8.42348 22.7722 8.86144 22.4967 9.95858L20.003 21.7277C19.8284 22.566 19.3242 22.7661 18.6244 22.3794L14.7851 19.5379L12.9957 21.2656C12.8121 21.4432 12.6631 21.5952 12.3801 21.6329C12.0987 21.672 11.8669 21.5877 11.6969 21.1212L10.3875 16.8003L10.3695 16.8124V16.8109Z"
            fill="#101010"
          />
        </svg>
      )}
      {title === "whatsapp" && (
        <svg
          width="31"
          height="31"
          viewBox="0 0 31 31"
          fill="none"
          xmlns="http://www.w3.org/2000/svg">
          <path
            d="M7.90578 24.8235L8.9954 25.4601C10.8329 26.5317 12.9228 27.0943 15.05 27.09C17.4313 27.09 19.7591 26.3838 21.7391 25.0609C23.719 23.7379 25.2622 21.8575 26.1735 19.6575C27.0848 17.4575 27.3232 15.0366 26.8587 12.7011C26.3941 10.3656 25.2474 8.22025 23.5636 6.53643C21.8797 4.85261 19.7344 3.70591 17.3989 3.24134C15.0634 2.77678 12.6425 3.01521 10.4425 3.92649C8.24248 4.83777 6.36209 6.38096 5.03912 8.36093C3.71615 10.3409 3.01002 12.6687 3.01002 15.05C3.01002 17.2112 3.5774 19.2836 4.64144 21.1061L5.27655 22.1957L4.29378 25.8092L7.90578 24.8235ZM0.00604013 30.1L2.0408 22.6231C0.700052 20.3248 -0.0043504 17.7108 2.02155e-05 15.05C2.02155e-05 6.73788 6.7379 0 15.05 0C23.3621 0 30.1 6.73788 30.1 15.05C30.1 23.3621 23.3621 30.1 15.05 30.1C12.3903 30.1043 9.77748 29.4004 7.47987 28.0607L0.00604013 30.1ZM9.61847 7.98853C9.82014 7.97348 10.0233 7.97348 10.225 7.98251C10.3063 7.98853 10.3875 7.99757 10.4688 8.0066C10.7081 8.03368 10.9715 8.17967 11.0603 8.38134C11.5087 9.39872 11.9452 10.4236 12.3666 11.4515C12.4599 11.6803 12.4042 11.9738 12.2266 12.2597C12.1045 12.4531 11.9724 12.64 11.8308 12.8196C11.6608 13.0378 11.295 13.4381 11.295 13.4381C11.295 13.4381 11.146 13.6157 11.2032 13.837C11.2243 13.9212 11.2935 14.0431 11.3567 14.1455L11.4455 14.2885C11.8308 14.9311 12.3485 15.5828 12.9806 16.1968C13.1612 16.3714 13.3373 16.5505 13.527 16.7175C14.2313 17.3391 15.0289 17.8463 15.8898 18.2225L15.8973 18.2255C16.0252 18.2812 16.09 18.3113 16.2766 18.3911C16.3699 18.4302 16.4662 18.4648 16.564 18.4904C16.6651 18.5162 16.7716 18.5113 16.8699 18.4765C16.9683 18.4417 17.054 18.3784 17.1164 18.2948C18.206 16.9749 18.3053 16.8891 18.3144 16.8891V16.8921C18.3901 16.8215 18.48 16.7679 18.5781 16.735C18.6762 16.702 18.7803 16.6904 18.8832 16.701C18.9735 16.707 19.0653 16.7235 19.1496 16.7612C19.9488 17.1269 21.2566 17.6973 21.2566 17.6973L22.1325 18.0901C22.28 18.1608 22.414 18.3279 22.4185 18.4889C22.4245 18.5897 22.4335 18.7523 22.3989 19.0503C22.3508 19.4401 22.2334 19.9081 22.116 20.1534C22.0356 20.3209 21.9289 20.4743 21.7999 20.608C21.6481 20.7674 21.4818 20.9125 21.3033 21.0414C21.2415 21.0878 21.1788 21.133 21.1152 21.1768C20.928 21.2956 20.7356 21.4061 20.5387 21.5079C20.1513 21.7138 19.7233 21.8319 19.2851 21.8541C19.0067 21.8691 18.7282 21.8902 18.4483 21.8752C18.4363 21.8752 17.5935 21.7442 17.5935 21.7442C15.4537 21.1814 13.4749 20.1271 11.8143 18.665C11.4741 18.3655 11.1596 18.0434 10.8375 17.7229C9.49807 16.3909 8.48671 14.9537 7.87267 13.5962C7.55838 12.9299 7.38861 12.2046 7.37452 11.4681C7.36831 10.5543 7.66701 9.6646 8.22334 8.93969C8.3332 8.79822 8.43704 8.65073 8.61614 8.48067C8.80727 8.30007 8.92767 8.20375 9.05861 8.13753C9.2327 8.05029 9.42261 7.9991 9.61696 7.98703L9.61847 7.98853Z"
            fill="#101010"
          />
        </svg>
      )}
      {title === "deleteCard" && (
        <svg
          width="21"
          height="17"
          viewBox="0 0 21 17"
          fill="none"
          xmlns="http://www.w3.org/2000/svg">
          <path
            d="M15.8848 3.4H20.8667V5.1H18.874V16.15C18.874 16.3754 18.769 16.5916 18.5821 16.751C18.3953 16.9104 18.1418 17 17.8776 17H3.92813C3.66387 17 3.41044 16.9104 3.22358 16.751C3.03672 16.5916 2.93174 16.3754 2.93174 16.15V5.1H0.938965V3.4H5.92091V0.85C5.92091 0.624566 6.02589 0.408365 6.21275 0.248959C6.3996 0.0895533 6.65304 0 6.9173 0H14.8884C15.1527 0 15.4061 0.0895533 15.593 0.248959C15.7798 0.408365 15.8848 0.624566 15.8848 0.85V3.4ZM16.8812 5.1H4.92452V15.3H16.8812V5.1ZM12.3117 10.2L14.0734 11.7028L12.6645 12.9047L10.9029 11.4019L9.14124 12.9047L7.73234 11.7028L9.49396 10.2L7.73234 8.6972L9.14124 7.4953L10.9029 8.9981L12.6645 7.4953L14.0734 8.6972L12.3117 10.2ZM7.91369 1.7V3.4H13.892V1.7H7.91369Z"
            fill="#DF6464"
          />
        </svg>
      )}
      {title === "minus" && (
        <svg
          width="30"
          height="30"
          viewBox="0 0 30 30"
          fill="none"
          xmlns="http://www.w3.org/2000/svg">
          <circle cx="15" cy="15" r="15" fill="#FFCE7F" />
          <path d="M8 14H22V16H8V14Z" fill="white" />
        </svg>
      )}
      {title === "plus" && (
        <svg
          width="31"
          height="30"
          viewBox="0 0 31 30"
          fill="none"
          xmlns="http://www.w3.org/2000/svg">
          <circle cx="15.2056" cy="15" r="15" fill="#FFCE7F" />
          <path
            d="M14.2056 14V8H16.2056V14H22.2056V16H16.2056V22H14.2056V16H8.20557V14H14.2056Z"
            fill="white"
          />
        </svg>
      )}
      {title === "close" && (
        <svg
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg">
          <path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M3.48871 3.48855C3.78161 3.19565 4.25648 3.19565 4.54937 3.48855L20.5116 19.4508C20.8045 19.7437 20.8045 20.2186 20.5116 20.5115C20.2187 20.8044 19.7439 20.8044 19.451 20.5115L3.48871 4.54921C3.19582 4.25631 3.19582 3.78144 3.48871 3.48855Z"
            fill="white"
          />
          <path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M20.5116 3.48855C20.8045 3.78144 20.8045 4.25631 20.5116 4.54921L4.54937 20.5115C4.25648 20.8044 3.78161 20.8044 3.48871 20.5115C3.19582 20.2186 3.19582 19.7437 3.48871 19.4508L19.451 3.48855C19.7439 3.19565 20.2187 3.19565 20.5116 3.48855Z"
            fill="white"
          />
        </svg>
      )}
      {title === "zoom" && (
        <svg
          xmlns="http://www.w3.org/2000/svg"
          version="1.1"
          id="Capa_1"
          x="0px"
          y="0px"
          viewBox="0 0 513.749 513.749"
          width="21"
          height="21">
          <g>
            <path
              fill="#000000"
              d="M504.352,459.061l-99.435-99.477c74.402-99.427,54.115-240.344-45.312-314.746S119.261-9.277,44.859,90.15   S-9.256,330.494,90.171,404.896c79.868,59.766,189.565,59.766,269.434,0l99.477,99.477c12.501,12.501,32.769,12.501,45.269,0   c12.501-12.501,12.501-32.769,0-45.269L504.352,459.061z M225.717,385.696c-88.366,0-160-71.634-160-160s71.634-160,160-160   s160,71.634,160,160C385.623,314.022,314.044,385.602,225.717,385.696z"
            />
          </g>
        </svg>
      )}
    </>
  );
};
